//data上部分
.data-top {
  position: absolute;
  width: 98%;
  height: 47%;
  top: 8%;
  left: 1%;
  //data-logo
  //data上部左侧代码
  .data-trend {
    width: 58%;
    left: -2px;
    h1 {
      span {
        width: 20%;
      }
    }
    .trend-con {
      width: 100%;
      position: relative;
      .trend-Change {
        width: 100%;
        height: 100%;
        z-index: 1;
        position: absolute;
        background: rgba(255, 255, 255, 0);
      }
      .trend-pic{
        height: 100%;
        overflow: hidden;
        width: 100%;
      }
    }
  }
  //data上部右侧代码
  .data-summary {
    width: 41%;
    right: 0px;
    h1 {
      span {
        width: 28%;
      }
    }
    .summary-con {
      width: 100%;
      position: relative;
      .summary-buffer, .summary-fluent, .summary-play, .summary-nobuffer {
        width: 50%;
        height: 50%;
        overflow: hidden;
        position: absolute;
        border: 2px solid #07080d;
        background: #0F131E;
      }

      .summary-buffer {
        top: -2px;
        left: -2px;
      }
      .summary-fluent {
        left: -2px;
        top: 50%;
      }
      .summary-play {
        right: -2px;
        top: -2px;
      }
      .summary-nobuffer {
        right: -2px;
        top: 50%;
      }
      span{
        font-size: 18px;
        font-weight: bold;
        position: absolute;
        right: 5px;
        bottom: 5px;
        color:#B9AEAE;
      }
    }
  }
  //左侧右侧相同代码
  .data-trend, .data-summary {
    position: absolute;
    background: #0f131e;
  }
  //end
}


#barChart{
  .left, .right {
    width: 44%;
    height: 100%;
  }
  .center {
    position: absolute;
    left: 44%;
    top: 0;
    width: 12%;
    height: 100%;
    background: #fff;
    ul {
      height: 90%;
      position: absolute;
      bottom: 0;
      li {
        width: 100%;
        .li-module {
          height: 100%;
          span {
            background: #7cf7dc;
            border-top: none;

            p {
              color: #545454;
              font-weight: bold;
            }
          }
          .wave{
            width: 100%;
            display: block;
            position: absolute;
            height: 15px;
            border-bottom: none;
          }
        }
      }
    }
  }
  .left {
    .li-module {
      span {
        background: rgba(36,242,198,0.7);
      }
    }
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    .li-module {
      span {
        background: rgba(36,242,198,0.7);
      }
    }
  }
  ul {
    height: 100%;
    width: 100%;
    li {
      display: block;
      width: 24.5%;
      margin-right: 0.5%;
      float: left;
      position: relative;
      height: 100%;
      .li-module {
        position: absolute;
        bottom: 0;
        height: 100%;
        width: 100%;
        span {
          display: block;
          position: absolute;
          bottom: 0;
          width: 100%;
          p {
            width: 100%;
            text-align: center;
            position: absolute;
            top: -30px;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

i.increase {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("/image/arrow-red.png");
}
i.reduce {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("/image/arrow-green.png");
}